<template>
  <div class="content-wrapper">
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="培训名称">
          <el-input
            v-model="listQuery.examineeUserName"
            type="text"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="课程类型">
          <el-select v-model="listQuery.examinationUserGroupId" size="mini">
            <el-option
              v-for="item in userGroupOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            搜索
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="listLoading"
        height="75vh"
        :data="listData"
        highlight-current-row
        default-expand-all
        row-key="id"
        lazy
      >
        <el-table-column label="培训名称" prop="label" min-width="200px" />

        <el-table-column label="培训时间" prop="startTime" width="160px" />
        <el-table-column
          label="培训方式"
          prop="modeName"
          width="150px"
          align="center"
        />
        <el-table-column label="考核方式" prop="assessName" width="150px" />

        <el-table-column label="创建时间" prop="createTime" width="160px" />
        <el-table-column
          label="操作"
          align="center"
          width="150px"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-dropdown v-if="row.trainId" trigger="click" class="filter-item">
              <!-- {{row}} -->
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item @click.native="viewRecord(row)"
                  >查看</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="titleMap[dialogStatus]"
      :visible.sync="practiceDialog"
      class="mini"
      @close="closePracticeDialog"
    >
      <el-form>
        <el-row
          ><el-col :span="22">
            <el-form-item label="操作时长">
              <el-input
                v-model="practiceDuration"
                :disabled="dialogStatus == 'update'"
                size="medium"
                type="number"
                style="margin-bottom: 20px; width: 50%"
                placeholder="请输入时间，单位秒"
              />
            </el-form-item> </el-col
        ></el-row>
        <el-row
          ><el-col :span="22">
            <el-form-item label="插入附件">
              <!-- <el-upload
                v-if="dialogStatus == 'create'"
                class="upload-demo"
                :action="uploadUrl"
                :on-preview="filePreview"
                :on-remove="fileRemove"
                :file-list="fileList"
                :data="paramsData"
                :headers="headers"
                :on-success="fileUploadSuccess"
                list-type="picture"
                :on-change="handleChange"
              >
                <el-button icon="el-icon-upload2" size="mini" circle />
              </el-upload> -->
            </el-form-item>
          </el-col></el-row
        >
      </el-form>

      <el-upload
        v-if="dialogStatus == 'update'"
        ref="upload"
        class="upload-demo upload_test"
        accept=".jpg, .jpeg, .png"
        :action="uploadUrl"
        :on-preview="filePreview"
        :on-remove="fileRemove"
        :file-list="fileList"
        list-type="picture"
        :on-change="handleChange"
      />

      <el-radio
        v-if="dialogStatus == 'update'"
        v-model="saveData.passFlag"
        :disabled="data.passFlag != 0"
        style="margin-top: 10px"
        :label="1"
        >合格</el-radio
      >
      <el-radio
        v-if="dialogStatus == 'update'"
        v-model="saveData.passFlag"
        :disabled="data.passFlag != 0"
        :label="2"
        >不合格</el-radio
      >
      <el-input
        v-if="dialogStatus == 'update'"
        v-model="saveData.comment"
        :disabled="data.passFlag != 0"
        style="margin-top: 10px"
        type="textarea"
        max-length="200"
        placeholder="请输入评语"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="practiceDialog = false">取 消</el-button>
        <el-button
          :disabled="data.passFlag != 0"
          type="primary"
          @click="
            dialogStatus == 'create' ? savePracticeRecord() : saveComment()
          "
          >保 存</el-button
        >
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { save, get, update } from '@/api/ts/practice'
import { generate } from '@/api/gid/gid'
import { deleteAttachment } from '@/api/base/attachment'
import { listTrainByClassify } from '@/api/ts/record'

export default {
  components: {},
  data() {
    return {
      uploadUrl:
        process.env.VUE_APP_BASE_API + '/api/base/attachment/upload_attachment',
      titleMap: {
        create: '新增',
        update: '修改'
      },
      passFlagStatus: {
        0: '未评',
        1: '合格',
        2: '不合格'
      },
      dialogStatus: '',
      gid: null,
      listData: [],
      total: 0,
      paperOptions: [],
      userGroupOptions: [],
      passFlagOptions: [],
      listQuery: {
        pageIndex: 0,
        pageNumber: 1,
        pageSize: 5,
        examinationPaperId: null,
        examineeUserGroupId: null,
        examineeUserName: null,
        passFlag: null
      },
      listLoading: false,
      practiceDialog: false,
      fileList: [],
      paramsData: {},
      headers: {},
      practiceDuration: 0,
      dialogVisible: false,
      dialogImageUrl: null,
      saveData: {
        practiceRecordId: null,
        comment: '',
        passFlag: 1
      },
      data: {
        passFlag: 0
      }
    }
  },
  mounted() {
    this.getListData()
  },
  methods: {
    saveComment() {
      update(this.saveData).then((res) => {
        this.$message.success('保存成功')
        this.practiceDialog = false
      })
    },
    viewAttachment(row) {
      get({ practiceRecordId: row.practiceRecordId }).then((res) => {
        this.practiceDuration = res.data.practiceDuration
        this.saveData.practiceRecordId = res.data.practiceRecordId
        this.data = res.data
        this.saveData.comment = res.data.comment
        if (res.data.passFlag != 0) {
          this.saveData.passFlag = res.data.passFlag
        }
        this.fileList = []
        if (res.data.attachmentListResult) {
          res.data.attachmentListResult.forEach((item) => {
            var data = {
              name: item.fileName,
              url: item.objectUrl
            }
            this.fileList.push(data)
            this.practiceDialog = true
            this.dialogStatus = 'update'
          })
        }
      })
    },
    closePracticeDialog() {
      this.gid = null
      this.fileList = []
      this.practiceDuration = 0
    },
    savePracticeRecord() {
      var saveData = {
        practiceRecordId: this.gid,
        practiceDuration: this.practiceDuration
      }
      save(saveData).then((res) => {
        this.practiceDialog = false
        this.$message.success('保存成功')
        this.getListData()
      })
    },
    fileUploadSuccess(file, fileList) {
      this.fileList.push(file)
    },
    filePreview(file) {
      // 文件详细查看
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    fileRemove(file, fileList) {
      // 文件删除
      deleteAttachment({ attachmentId: file.attachmentId }).then((res) => {
        this.fileList = fileList.filter((item) => {
          if (item.attachmentId != file.attachmentId) {
            return item
          }
        })
      })
    },
    openPracticeDialog() {
      // 打开窗口
      generate().then((res) => {
        this.gid = res.data
        this.paramsData = {
          bizId: this.gid,
          bizType: 1
        }
        this.headers = {
          Authorization: this.$store.getters.token
        }
        this.dialogStatus = 'create'
        this.practiceDialog = true
      })
    },
    getListData() {
      // 获取实操列表数据
      listTrainByClassify({
        assess: 'assess_practical'
      }).then((res) => {
        this.listData = res.data
      })
    },
    handleChange(file, fileList) {
      console.log(file, fileList, 'file, fileList')
      // 上传成功
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const whiteList = ['jpg', 'jpeg', 'png']
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$refs.upload.uploadFiles = this.$refs.upload.uploadFiles.filter(
          (e) => {
            if (e.uid !== file.uid) {
              return true
            }
          }
        )
        this.$message.warning(
          '上传文件只能是 docx、xlsx、pptx、ppt、doc、xls、pdf格式'
        )
        return
      }
    },

    handleFilter() {},
    viewRecord(row) {
      this.$router.push({
        path: '/train/practical_record_detail_page',
        query: { trainId: row.trainId, mode: row.assess, trainName: row.label }
      })
    }
  }
}
</script>

<style>
.upload_test .el-icon-close {
  display: none !important;
}
.upload_test .el-upload-list__item-status-label {
  display: none !important;
}
</style>
